import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { LfTimeLine } from "./index";

const meta = {
  title: "示例/时间线",
  component: LfTimeLine,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    timeList: {
      description: `【iconType】有这些选择：
       "success" | "error" | "warning" | "loading" | "default"`,
    },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {},
} satisfies Meta<typeof LfTimeLine>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  name: "时间线",
  args: {
    timeList: [
      {
        leftContent: (
          <div style={{ width: "100px", textAlign: "right" }}>
            今天是什么日子？
          </div>
        ),
        rightContent: "2024/10/31",
        iconType: "success",
      },
      {
        leftContent: "2024-11-1",
        rightContent: "今天星期5",
        iconType: "error",
      },
      {
        leftContent: [<div>"2024-11-1"</div>, <div>周五</div>],
        iconType: "warning",
      },
      {
        leftContent: (
          <div>
            <div>什么时候才能</div>
            <div>财富自由！！</div>
          </div>
        ),
        rightContent: "快了快了",
        iconType: "loading",
      },
      {
        leftContent: (
          <div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
            <div>说点什么</div>
          </div>
        ),
        rightContent: "够了",
      },
    ],
  },
};
